<template>
  <div class="link-box">
    <div class="left">
      <div class="pare-infos">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
        >
          <el-form-item label="联系人姓名" prop="m_name">
            <el-input
              v-model="ruleForm.m_name"
              placeholder="请输入联系人姓名"
            />
          </el-form-item>

          <el-form-item label="被寻人与联系人关系" prop="m_relat_l">
            <el-input
              v-model="ruleForm.m_relat_l"
              placeholder="请输入被寻人与联系人的关系"
            />
          </el-form-item>

          <el-form-item label="联系人手机" prop="m_phone">
            <el-input
              v-model="ruleForm.m_phone"
              placeholder="请输入联系人手机"
            />
          </el-form-item>

          <el-form-item label="联系人邮箱" prop="m_email">
            <el-input
              v-model="ruleForm.m_email"
              placeholder="请输入联系人邮箱"
            />
          </el-form-item>

          <el-form-item label="联系人微信" prop="m_wechat">
            <el-input
              v-model="ruleForm.m_wechat"
              placeholder="请选择联系人微信"
            />
          </el-form-item>

          <el-form-item label="联系人地址" prop="m_addr">
            <el-input
              v-model="ruleForm.m_addr"
              placeholder="请输入联系人地址"
              type="textarea"
            />
          </el-form-item>
        </el-form>
      </div>
      <Button :flag="flag">
        <template #next>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >下一步</el-button
          >
        </template>
      </Button>
    </div>
    <div class="right">
      <img src="@/assets/img/link.webp" alt="" class="img" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import Button from "./button.vue";
import type { FormInstance, FormRules } from "element-plus";
import { ref, reactive, inject, getCurrentInstance } from "vue";
const flag = JSON.parse(window.sessionStorage.getItem("flag") || "true");
// const instance = getCurrentInstance();

const infos = reactive({
  form: {},
});
// const loserForms = ref<any>("");
// instance?.proxy?.$Bus.on("loserForm", (loserForm: any) => {
//   loserForms.value = loserForm;
// });

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<any>({
  // linkForm: {
  m_name: "",
  m_phone: "",
  m_email: "",
  m_wechat: "",
  m_addr: "",
  m_relat_l: "",
  // },
});
const rules = reactive<FormRules>({
  m_name: [
    { required: true, message: "请输入联系人姓名", trigger: "blur" },
    { min: 2, max: 16, message: "名字长度大于2位", trigger: "blur" },
  ],
  m_relat_l: [
    {
      required: true,
      trigger: "change",
    },
  ],
  m_phone: [
    {
      required: true,
      message: "请输入联系人电话",
      trigger: "change",
    },
  ],
  m_email: [
    {
      required: true,
      trigger: "change",
    },
  ],
  m_wechat: [
    {
      required: true,
      trigger: "change",
    },
  ],
  m_addr: [
    {
      required: true,
      message: "请输入联系人地址",
      trigger: "change",
    },
  ],
});

// 再未提交前 返回页面 数据不丢失
const data = window.sessionStorage.getItem("linkForm") || "{}";
const linkForms = JSON.parse(data);
Object.keys(ruleForm).forEach((key) => {
  ruleForm[key] = linkForms[key] || ruleForm[key];
});

const active = inject("active", ref(1));
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (!valid) return;
    active.value++;
  });
  // 向下一步传递 当前拼接后的信息
  // instance?.proxy?.$Bus.emit("linkForm", infos.form);
  window.sessionStorage.setItem("linkForm", JSON.stringify(ruleForm));
};
</script>

<style scoped lang="less">
.link-box {
  display: flex;
  .left {
    flex: 1;
    .pare-infos {
      padding: 50px;
    }
  }
  .right {
    width: 40%;
    .img {
      width: 100%;
      height: 100%;
      border-radius: 0 10px 10px 0;
    }
  }
}
</style>
